<template>
	<view class="resume-container">
		<view class="resume-form mb32">
			<view class="common-title">
				#个人信息
			</view>
			<view class="resume-form-item">
				<text class="label">姓名</text>
				<input class="input-text" v-model="form.userName" type="text" placeholder="请填写您的姓名">
			</view>
			<view class="resume-form-item">
				<text class="label">性别</text>
				<picker :value="genderIndex" :range="genderList" @change="handleChangeGender">
					<input class="input-text select" v-model="genderList[genderIndex]" disabled type="text" readonly
						placeholder="请选择您的性别">
				</picker>
			</view>
			<view class="resume-form-item">
				<text class="label">出生年月日</text>
				<picker mode="date" :value="form.birthday" fields="day" :start="startDate" :end="endDate"
					@change="handleChangeBirthDay">
					<input class="input-text select" v-model="form.birthday" disabled type="text"
						placeholder="请选择您的出生年月">
				</picker>
			</view>
			<view class="resume-form-item">
				<text class="label">身份证号</text>
				<input class="input-text" v-model="form.identityCard" type="text" placeholder="请填写您的身份证号">
			</view>
			<view class="resume-form-item">
				<text class="label">联系电话</text>
				<input class="input-text" v-model="form.phone" type="number" placeholder="请填写您的联系电话">
			</view>
		</view>
		<view class="resume-form mb32">
			<view class="common-title">
				#教育背景
			</view>
			<view class="resume-form-item">
				<text class="label">学校名称</text>
				<input class="input-text" v-model="form.schoolName" type="text" placeholder="请填写您的学校名称">
			</view>
			<view class="resume-form-item">
				<text class="label">院系/专业</text>
				<input class="input-text" v-model="form.major" type="text" placeholder="请填写您的院系/专业">
			</view>
			<view class="resume-form-item">
				<text class="label">学历层次</text>
				<input class="input-text" v-model="form.qualification" type="text" placeholder="请填写您的学历层次">
			</view>
			<view class="resume-form-item">
				<text class="label">入学时间</text>
				<picker mode="date" :value="enrolTime" fields="month" :start="startDate" :end="endDate"
					@change="handleChangeEnrolStartDate">
					<input class="input-text select" v-model="form.enrolTime" disabled type="text"
						placeholder="请选择您的入学时间">
				</picker>
			</view>
			<view class="resume-form-item">
				<text class="label">毕业时间</text>
				<picker mode="date" :value="gradTime" fields="month" :start="startDate" :end="endDate"
					@change="handleChangeEnrolEndDate">
					<input class="input-text select" v-model="form.gradTime" disabled type="text"
						placeholder="请选择您的毕业时间">
				</picker>
			</view>
		</view>
		<view class="resume-form mb32">
			<view class="common-title">
				#求职意向
			</view>
			<view class="resume-form-item">
				<text class="label">意向行业</text>
				<input class="input-text" v-model="form.intendedIndustry" type="text" placeholder="请填写您的意向行业">
			</view>
			<view class="resume-form-item">
				<text class="label">意向岗位</text>
				<input class="input-text" v-model="form.intendedPosition" type="text" placeholder="请填写您的意向岗位">
			</view>
			<view class="resume-form-item">
				<text class="label">期望薪资范围</text>
				<input class="input-text" v-model="form.salaryRange" type="text" placeholder="请填写期望薪资范围">
			</view>
		</view>
		<view class="resume-form mb32">
			<view class="common-title">
				#其他信息
			</view>
			<view class="resume-form-item">
				<text class="label">紧急联系人及电话</text>
				<input class="input-text" v-model="form.emergencyContact" type="text" placeholder="请填写紧急联系人及电话">
			</view>
			<view class="resume-form-item">
				<u-checkbox-group @change="handleChange">
					<u-checkbox :value="isChecked" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<text>本人承诺所填信息真实有效，并同意活动组织方使用相关信息。</text>
			</view>
		</view>
	
		<view class="submit-btn"  @tap="handleSubmit">
			<button :class="{ 'disabled': !isChecked }" :disabled="!isChecked">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		applyActivity
	} from '@/common/api_invitation.js'

	export default {
		data() {
			return {
				form: {
					userName: '',
					userSex: '',
					birthday: '',
					identityCard: '',
					phone: '',
					
					schoolName: '',
					major: '',
					qualification: '',
					enrolTime: '',
					gradTime: '',
					
					intendedIndustry: '',
					intendedPosition: '',
					salaryRange: '',
					
					emergencyContact: ''
				},
				enrolTime: '',
				gradTime: '',
				genderIndex: -1,
				stationEduIndex: -1,
				salaryIndex: -1,
				genderList: ['男', '女'],
				salaryList: ['面议', '1000~2000', '2000~3000', '3000~4000', '4000~5000', '5000~6000', '6000~7000',
					'7000~8000', '8000~9000', '9000~10000', '10000以上'
				],
				isChecked: false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		onLoad: function(option) {
			
		},

		methods: {
			handleChangeGender(e) {
				this.genderIndex = e.detail.value
				this.form.userSex = Number(e.detail.value)
			},

			handleChangeBirthDay(e) {
				this.form.birthday = e.detail.value
			},
			handleChangeEnrolStartDate(e) {
				this.form.enrolTime = e.detail.value
			},
			handleChangeEnrolEndDate(e) {
				this.form.gradTime = e.detail.value
			},
			
			handleChange(e) {
				console.log(e, 'handleChange')
				this.isChecked = e.length > 0
			},
			
			// handleChangeSalary(e) {
			// 	this.form.hopeSalary = this.salaryList[e.detail.value]
			// },
			
			
			// 保存简历
			async handleSubmit() {
				console.log(this.form, 'handleSubmit')
				
				if (!this.form.userName) {
					uni.showToast({
						title: '请填写您的姓名',
						icon: 'none'
					})
					return	
				}
				
				if (this.form.userSex != '') {
					uni.showToast({
						title: '请选择您的性别',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.birthday) {
					uni.showToast({
						title: '请选择您的出生年月',
						icon: 'none'
					})
					return
				}
	
				if (this.form.identityCard) {
					const validCard = this.isValidID(this.form.identityCard)
					if (!validCard) {
						uni.showToast({
							title: '身份证格式错误',
							icon: 'none'
						})
						return
					}
				} else {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.phone) {
					uni.showToast({
						title: '请填写您的联系电话',
						icon: 'none'
					})
					return
				}
				
				
				if (!this.form.schoolName) {
					uni.showToast({
						title: '请填写您的学校名称',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.major) {
					uni.showToast({
						title: '请填写您的院系/专业',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.qualification) {
					uni.showToast({
						title: '请填写您的学历层次',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.enrolTime) {
					uni.showToast({
						title: '请选择您的入学时间',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.gradTime) {
					uni.showToast({
						title: '请选择您的毕业时间',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.intendedIndustry) {
					uni.showToast({
						title: '请填写您的意向行业',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.intendedPosition) {
					uni.showToast({
						title: '请填写您的意向岗位',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.salaryRange) {
					uni.showToast({
						title: '请填写期望薪资范围',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.emergencyContact) {
					uni.showToast({
						title: '请填写紧急联系人及电话',
						icon: 'none'
					})
					return
				}
				
				const res = await applyActivity(this.form)
				if (res.code === 200) {
					uni.showToast({
						title: '报名成功！'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpage/invitation/activity'
						})
					}, 300)
				}
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			isObjectEmpty(obj) {
				return Object.keys(obj).length === 0;
			},
			findValByKey(arr, val) {
				return arr.findIndex(item => item === val)
			},
			// 身份证校验
			isValidID(id) {
				var pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
				return pattern.test(id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resume-container {
		width: 100%;
		padding: 24rpx 32rpx 40rpx 32rpx;
		background: #F2F5FF;
		box-sizing: border-box;
	}

	.resume-form {
		width: 100%;
		padding: 18rpx 46rpx 36rpx;
		background: #FFFFFF;
		border-radius: 20px;
		box-sizing: border-box;

		.common-title {
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 0;
		}

		.resume-form-item {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);

			&.avatar {
				padding: 20rpx 0;
			}

			.file-box {
				display: flex;
				justify-content: flex-end;
			}

			&.introduct {
				display: block;
				position: relative;
				border-bottom: 0;
				padding: 32rpx 0 0;
			}


			.label {
				position: relative;
				display: block;
				font-weight: 400;
				font-size: 28rpx;
				padding-left: 12rpx;
				color: #34314F;
				line-height: 20px;
				
				&::after {
					position: absolute;
					top: 0;
					left: -4rpx;
					content: '*';
					color: #f56c6c;
				}
			}

			.label-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(52, 49, 79, 0.7);
				line-height: 18px;
				text-align: left;
			}

			.input-text {
				position: relative;
				text-align: right;
				font-size: 26rpx;

				&.select {
					padding-right: 40rpx;
				}

				&.select::after {
					position: absolute;
					top: 50%;
					right: 0;
					display: block;
					width: 32rpx;
					height: 32rpx;
					transform: translateY(-50%);
					background: url('@/static/images/index/right-arrow.png') no-repeat center;
					background-size: 100% 100%;
					content: '';
				}
			}

			.textarea-text {
				width: 100%;
				height: 440rpx;
				padding: 24rpx 0;
				box-sizing: border-box;
				font-size: 26rpx;
			}

			.count {
				position: absolute;
				bottom: 16rpx;
				right: 20rpx;
				font-size: 24rpx;
				color: rgba(52, 49, 79, 0.4);
			}

			.experience-head {
				display: flex;
				justify-content: space-between;

			}

			.experience-list {
				margin-top: 24rpx;

				.experience-item {
					margin-bottom: 28rpx;
					padding-bottom: 28rpx;
					border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);

					&:last-child {
						margin-bottom: 0;
					}

					.company-name {
						display: block;
						margin-bottom: 14rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
					}

					.job-name {
						font-weight: 600;
						font-size: 26rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
					}

					.work-date {
						margin-left: 28rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.5);
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
					}

					.work-desc {
						position: relative;
						display: block;
						margin-top: 20rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 44rpx;
						text-align: left;
						font-style: normal;

						&::after {
							position: absolute;
							top: 50%;
							right: -36rpx;
							display: block;
							width: 32rpx;
							height: 32rpx;
							transform: translateY(-50%);
							background: url('@/static/images/index/right-arrow.png') no-repeat center;
							background-size: 100% 100%;
							content: '';
						}
					}
				}
			}

			.add-btn {
				width: 40rpx;
				height: 40rpx;
				background: url('@/static/images/more.png') no-repeat center;
				background-size: 100% 100%;
			}
		}
	}

	.submit-btn {
		margin-top: 44rpx;

		button {
			height: 48px;
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 48px;
			text-align: center;
			font-style: normal;
			background: #FFDE6D;
			border-radius: 20px;

			&::after {
				border: 0;
			}
			
			&.disabled {
				background: rgba(52, 49, 79, 0.06) !important;
			}
		}
		
		
	}

	.ellipsis {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		max-width: 300rpx;
		/* 设置最大宽度以限制文本的显示长度 */
	}
</style>